<template>
  <div>
    <h3>{{title}}</h3>
    <hr style="margin: 20px auto" />
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="username" label="姓名" />
      <el-table-column prop="sex" label="性别" />
      <el-table-column prop="age" label="年龄" />
      <el-table-column prop="major" label="专业">
        <template #default="scope">
          {{ scope.row.major }}
        </template>
      </el-table-column>
      <el-table-column prop="graduation" label="是否毕业">
        <template #default="scope">
          {{ scope.row.graduation ? "是" : "否" }}
        </template>
      </el-table-column>
      <el-table-column prop="intro" label="个人介绍" />
      <el-table-column fixed="right" label="操作">
        <template #default="scope">
          <el-button @click.prevent="by(scope.row)"> 毕业 </el-button>
          <el-button type="danger" @click.prevent="del(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="info.pagenum"
      v-model:page-size="info.pagesize"
      :page-sizes="[1, 3, 6, 8]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
export default {
  props: {
    tableData: Array, //表格参数
    title:String,     //标题
    total:Number,     //数据的数量
    info:Object,      //分页的参数
  },
  setup(prop, { emit }) {
    const router = useRouter();
    const route = useRoute();
    const store = useStore();
    const data = reactive({
      
    });
    // 毕业
    const by = (val) => {
      emit("by", val);
    };
    // 删除学生信息
    const del = (val) => {
      emit("delUser", val);
    };
    // 每页数据数量
    const handleSizeChange = (val) => {
      emit("handleSizeChange", val);
    };
    // 当前页码
    const handleCurrentChange = (val) => {
      emit("handleCurrentChange", val);
    };
    return {
      ...toRefs(data),
      by,
      del,
      handleSizeChange,
      handleCurrentChange,
    };
  },
};
</script>

<style scoped lang='scss'>
</style>